<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      msg: 1,
      myInterval: undefined,
    };
  },
  methods: {
    axios,
  },
  beforeCreate() {
    console.log(
      "在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。",
      this.msg
    );
  },
  created() {
    console.log("created，Vue实例创建完成，可以访问数据", this.msg);
  },
  beforeMount() {
    console.log("在挂载开始之前被调用：相关的 render 函数首次被调用");
  },
  mounted() {
    console.log("mounted,挂载完成，可以看到界面样式");
    this.myInterval = setInterval(() => {
      this.msg = this.msg + 1;
    }, 1000);
  },
  beforeUpdate() {
    console.log("在数据发生改变后，DOM 被更新之前被调用。", (this.msg += 1));
  },
  updated() {
    console.log(
      "在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用",
      this.msg
    );
  },
  beforeDestroy() {
    console.log("实例销毁之前调用。在这一步，实例仍然完全可用", this.msg);
    clearInterval(this.myInterval);
  },
  destroyed() {
    console.log(
      "实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。",
      this.msg
    );
  },
};
</script>

<style>
</style>